import Vue from 'vue'
import VueRouter from 'vue-router'

// 默认加载
import layout from '@/views/layout'
import Home from '@/views/layout/home.vue'
import category from '@/views/layout/category.vue'
import cart from '@/views/layout/cart.vue'
import user from '@/views/layout/user.vue'
// 导入store
import store from '@/store'

// 导入组件
// (只加载到文件夹即可，不需要加载到文件夹下的文件)
// 异步组件 -> 懒加载（按需加载）
const login = () => import('@/views/login')
const search = () => import('@/views/search')
const list = () => import('@/views/search/list.vue')
const prodetail = () => import('@/views/prodetail')
const pay = () => import('@/views/pay')
const myorder = () => import('@/views/myorder')

Vue.use(VueRouter)

// 配置路由规则(可以直接写在下面，默认的路由规则是一个空数组)
// const routes = [

// ]

const router = new VueRouter({
  // 路由规则是 数组里面包对象
  routes: [
    // 一级路由
    { path: '/login', component: login },
    //  单独一个 /  是首页
    // 二级路由(需要在一级路由下面,children)
    {
      path: '/',
      // 路由重定向（一进页面就显示首页）
      redirect: '/home',
      component: layout,
      // 二级路由(需要在一级路由下面,children),数组里面包对象
      children: [
        { path: '/home', component: Home },
        { path: '/category', component: category },
        { path: '/cart', component: cart },
        { path: '/user', component: user }

      ]
    },
    { path: '/search', component: search },
    { path: '/list', component: list },
    // 商品详情 需要知道是哪一个商品，路由参数中携带 id，使用path路径跳转里的 动态路由传参
    { path: '/prodetail/:id', component: prodetail },
    { path: '/pay', component: pay },
    { path: '/myorder', component: myorder }

  ]
})
// 所有的路由在真正被访问到之前（解析渲染对应组件页面前），都会先经过全局前置守卫，只有全局前置守卫放行，才会到达对应的页面

// 全局前置导航守卫
// to: 到哪里去，到哪里去的完整路由信息对象(路由，参数)
// from: 从哪里来，从哪里来的完整路由信息对象(路由，参数)
// next：是否放行
// （1）next() 直接放行，放行到to要去的路径
// （2）next(路径) 进行拦截，拦截到next里面的配置的路径

// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {
  // console.log(to, from, next)

  // 看to.path是否在authUrl数组里出现过(不是需要授权的页面 放行)
  if (!authUrls.includes(to.path)) {
    // 非权限页面直接放行
    next() // 所有的都放行
    return
  }

  // 是权限页面，需要判断token是否存在

  // 封装 store.state.user.userInfo.token  在store里面
  const token = store.getters.token
  // console.log(token)
  if (token) {
    next()
  } else {
    next('/login')
  }
  return false
})

export default router
